<template>
  <div>
    <!-- 搜索 -->
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" style="height:180px;width:100%" />

      </van-swipe-item>
    </van-swipe>
    <el-card class="box-card">
      <van-row style="text-align:center;">
        <van-col span="6">
          <img src="../assets/icon/quanbushangpin.svg" alt="加载失败" @click="product()">
          <h5>全部商品</h5>
        </van-col>
        <van-col span="6"><img src="../assets/icon/youhuijuan11-copy.svg" alt="加载失败">
          <h5>优惠卷</h5>
        </van-col>
        <van-col span="6"><img src="../assets/icon/jifenshangpin.svg" alt="加载失败" @click="integral()">
          <h5>积分商品</h5>
        </van-col>
        <van-col span="6"><img src="../assets/icon/jifenqiandao.svg" alt="加载失败">
          <h5>积分签到</h5>
        </van-col>
      </van-row>
    </el-card>
    <!-- 精品推荐 -->
    <div class="box-card">
      <span>精品推荐</span>
      <van-grid :column-num="2" :gutter="15">
        <van-grid-item v-for="(goods, index) in goodsHot" :key="index" style="height: 180px"
          @click="todetails(goods.id)">
          <van-image :src="baseUrl+goods.image" style="height: 100px" />
          <div style="font-size: 15px; padding: 5px 0">{{ goods.goodsName }}</div>
          <div style="font-size: 19px; color: #df8d46">
            ￥{{goods.otPrice }}
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <xFooter />
  </div>
</template>
<script>
import { Toast } from 'vant';
import { listGoods, selectHot, } from "@/api/goods/goods";
export default {
  data () {
    return {
      images: [
        '../../static/img/1.jpg',
        '../../static/img/2.jpg',
      ],
      value: '',
      goodsList: [],
      goodsTeam: [],
      goodsHot: [],

    }
  },

  methods: {
    //   商品详情
    todetails (val) {
      this.$router.push({ name: 'details', params: { id: val } })
    },
    getGoodsList () {
      listGoods().then(res => {
        this.goodsList = res.rows
      })

    },

    getGoodsHot () {
      selectHot().then(res => {
        this.goodsHot = res.rows
      })
    },
    onSearch (val) {
      Toast(val);
    },
    onCancel (val) {
      Toast("取消");
    },
    product () {
      this.$router.push('/productList')
    },
    integral () {
      this.$router.push('/integral')
    }
  },
  created () {
    this.getGoodsList()
    this.getGoodsHot()
  }
}
</script>
<style scoped>
.box-card {
  margin-top: 5px;
  justify-content: space-around;
}
.box-card > span {
  margin: 30px;
}
span {
  font-size: 13px;
  color: #666565;
}
</style>
